<template>
  <div class="full-screen">
    <div class="layout">
      <NavBar />
      <div class="wrapper">
        <!-- 左侧菜单 -->
        <div class="side">
          <!-- 布局结构 -->
          <div class="side-tree">
            <StructureTree :data="structureData" />
          </div>
          <!-- 组件菜单 -->
          <div class="side-component">
            <div class="side-label">模型组件</div>
            <div :id="NODE_CONTAINER_ID" class="side-nodes"></div>
          </div>
        </div>

        <!--画布 -->
        <div :id="GRAPH_CONTAINER_ID" :class="GRAPH_CONTAINER_ID" />
        <!-- 小地图 -->
        <div :id="MINIMAP_CONTAINER_ID" :class="MINIMAP_CONTAINER_ID" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { StructureTree, NavBar } from '@/components'
import { GRAPH_CONTAINER_ID, MINIMAP_CONTAINER_ID, NODE_CONTAINER_ID } from '@/config'
import { onMounted, ref } from 'vue'
import Designer from '@/designer'
import { Cell } from '@antv/x6'
import { EDesignerEventKey } from '@/types'

const designer = ref<Designer>()
const structureData = ref<Cell[]>([])

onMounted(() => {
  designer.value = new Designer({
    container: {
      graph: document.getElementById(GRAPH_CONTAINER_ID) as HTMLElement,
      node: document.getElementById(NODE_CONTAINER_ID) as HTMLElement,
      miniMap: document.getElementById(MINIMAP_CONTAINER_ID) as HTMLElement
    },
    plugins: {
      miniMap: false
    },
    events: {
      [EDesignerEventKey.NODE_CHANGE]: () => {
        structureData.value = designer.value?.graph?.getNodes() || []
      }
    }
  })
})
</script>

<style lang="scss" scoped>
body {
  overflow-y: hidden;
}
.full-screen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  .layout {
    display: flex;
    height: 100%;
    position: relative;
    flex-direction: column;
    .wrapper {
      display: flex;
      flex: 1;
      height: 100%;
      position: relative;
      flex-direction: row;
      overflow: hidden;
      .side {
        background-color: #fff;
        border-right: 1px solid #00000017;
        width: 300px;
        color: var(--lfb-color-black);
        height: 100%;
        display: flex;
        flex-direction: column;

        .side-tree {
          height: 30%;
          padding: 16px;
        }
        .side-component {
          padding: 14px 16px;
          flex: 1;
          .side-nodes {
            height: 100%;
            overflow: scroll;
          }
        }
      }
      .graph-container {
        flex: 1;
      }
      .mini-map {
        position: absolute;
        bottom: 0px;
        right: 0px;
        z-index: 1;
      }
    }
  }
}
</style>
